import { Button, Form, Input } from "antd";
import React, { useState } from "react";
import { _register } from "../../store/apis/adminApi";
import { Link } from "react-router-dom";

const formItemLayout = {
  labelCol: {
    xs: {
      span: 8,
    },
    sm: {
      span: 8,
    },
  },
  wrapperCol: {
    xs: {
      span: 8,
    },
    sm: {
      span: 9,
    },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 8,
      offset: 0,
    },
    sm: {
      span: 8,
      offset: 8,
    },
  },
};
const Register = () => {
  const [form] = Form.useForm();



  //表单提交函数
  const onFinish = (values) => {
    console.log("表单中数据: ", values);
    const regidata = JSON.stringify(values);
    _register(regidata);
  };

  return (
    <Form
      {...formItemLayout}
      form={form}
      name="register"
      onFinish={onFinish}
      scrollToFirstError
    >
      <center>
        <h2>请注册您的账号</h2>
      </center>
      <Form.Item
        name="name"
        label="姓名"
        rules={[
          {
            required: true,
            message: "请输入您的姓名!",
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="adminaccount"
        label="账号"
        rules={[
          {
            required: true,
            message: "请输入您的账号!",
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="adminpwd"
        label="密码"
        rules={[
          {
            required: true,
            message: "请输入您的密码!",
          },
        ]}
        hasFeedback
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="confirmPassword"
        label="确认密码"
        dependencies={["adminpwd"]}
        hasFeedback
        rules={[
          {
            required: true,
            message: "请确认您的密码!",
          },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue("adminpwd") === value) {
                return Promise.resolve();
              }
              return Promise.reject(
                new Error("两次输入密码不同！")
              );
            },
          }),
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item {...tailFormItemLayout}>
        <Button type="primary" htmlType="submit">
          注册
        </Button>
        <Button style={{ marginLeft: "10px" }}>
          <Link to="/">返回</Link>
        </Button>
      </Form.Item>
    </Form>
  );
};
export default Register;
